<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>食堂管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>商家注册管理</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="noticeInfo" stripe border style="width: 100%">
      <el-table-column v-if="showMidColumn" prop="mid" label="序号" width="55px" >
        <template #default="{ row }">
          <!-- 根据状态改变文本颜色 -->
          <span :class="statusClass(row.mid)">
          {{ row.mid }}
      </span>
        </template>
      </el-table-column>
      <el-table-column prop="mname" label="店铺名" width="180px"/>
      <el-table-column prop="mphone" label="电话号"  />
      <el-table-column prop="maddress" label="店铺地址" />
      <el-table-column prop="mrange" label="类型" />
      <el-table-column prop="mlicense" label="许可证图片" width="120px">
        <template #default="{ row }">
          <el-image
              style="width: 100px; height: 100px"
              :src="'http://localhost:8085' + row.mlicense"
              :alt="'许可证图片 - ' + row.mname"
              fit="cover"
              :preview-src-list="['http://localhost:8085' + row.mlicense]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="canteen" label="食堂" />
      <el-table-column prop="status" label="状态" >
        <template #default="{ row }">
          <!-- 根据状态改变文本颜色 -->
          <span :class="statusClass(row.isdel)">
              {{ row.isdel }}
            </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" align="center">
        <template #default="{ row }">
          <!-- 操作按钮 -->
          <el-button
              type="success"
              size="default"
              :disabled="approveDisabledMap[row.mid]"
              @click="approveAudit(row)"
          >
            <el-icon><CircleCheck /></el-icon>同意
          </el-button>
          <el-button
              type="danger"
              size="default"
              :disabled="rejectDisabledMap[row.mid]"
              @click="rejectAudit(row)"
          >
            <el-icon><CircleClose /></el-icon>拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[4,8]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import {ArrowRight, Delete, CircleCheck,CircleClose} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/canteen";
import {ElMessage} from "element-plus";
onMounted(()=>{
  getNotice();
})
//分页
const currentPage = ref(1)
const pageSize = ref(4)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const noticeInfo=ref([])
const getNotice=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含其他参数
  };
  request({
    url:'/can/getPages',
    method:'get',
    params,
  }).then((req)=>{
    if (req.data.errorCode==200){
      noticeInfo.value=req.data.data.records;
      totals.value=req.data.data.total;
      noticeInfo.value.forEach((item) => {
        if(item.isdel == "已同意"){
          approveDisabledMap[item.mid] = true;
          rejectDisabledMap[item.mid] = true;
        }else if (item.isdel == "已拒绝") {
          approveDisabledMap[item.mid] = true;
          rejectDisabledMap[item.mid] = true;
        }else if(item.isdel == "未审核"){
          approveDisabledMap[item.mid] = false;
          rejectDisabledMap[item.mid] = false;
        }
      });
    }
  })
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getNotice()
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getNotice()
}

// 同意和拒绝按钮的禁用状态映射
const approveDisabledMap = reactive({});
const rejectDisabledMap = reactive({});
const statusClass = (status) => {
  switch (status) {
    case '未审核':
      return 'status-normal';
    case '已通过':
      return 'status-delayed';
    case '已拒绝':
      return 'status-cancelled';
    default:
      return '';
  }
};

const approveAudit = (row) => {
  // 模拟同意审核操作
  request({
    url:'/can/approve',
    method:'get',
    params:{
      mid: row.mid
    }
  }).then(req=>{
    if (req.data.errorCode==200){
      ElMessage.success("审核通过");
      row.isdel="已同意";
      getNotice();
    }
  })
};

const rejectAudit = (row) => {
  // 模拟拒绝审核操作
  request({
    url:'/can/reject',
    method:'get',
    params:{
      mid: row.mid
    }
  }).then(req=>{
    if (req.data.errorCode==200){
      ElMessage.success("审核未通过");
      row.isdel="已拒绝";
      getNotice();
    }
  })
};
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
.status-normal {
  color: blue;
}

.status-delayed {
  color: green;
}

.status-cancelled {
  color: red;
}
</style>